<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仪表盘</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <link rel="stylesheet" href="/style.css">
  <script src="/wordcloud2.js"></script>
</head>
<body>
<div class="container">
  <!-- Sidebar -->
  <div class="sidebar">
    <div class="sidebar-header">
      <h2>系统</h2>
    </div>
    <ul class="sidebar-menu">
      <li><a href="/home">仪表盘</a></li>
      <li><a href="/papers">论文管理</a></li>
    </ul>
  </div>

  <!-- Main content -->
  <div class="main-content">
    <header class="header">
      <div class="header-title">
        <h1>欢迎使用论文管理系统</h1>
        <p>您的论文管理一站式解决方案</p>
      </div>
    </header>
    <section class="overview">
      <div class="card">
        <h3>总论文数</h3>
        <!-- 使用 Thymeleaf 渲染实际的论文数 -->
        <p th:text="${paperCount}"></p>
      </div>
      <div class="card">
        <h3>关键词云</h3>
        <div id="wordcloud" style="width: 500px; height: 400px;"></div>
      </div>
    </section>
  </div>
</div>

<script th:inline="javascript">
  window.onload = function() {
    if (typeof WordCloud !== "undefined") {
      console.log("WordCloud is loaded");

      var keywords = [[${allKeywords}]];  // 从后端获取的keywords
      console.log("关键词数据:", keywords);  // 输出关键词数据，检查它是否按预期加载

      // 清理和拆分关键词
      var cleanedKeywords = keywords.replace(/\n/g, "").replace(/\s+/g, " ").trim();
      var keywordList = cleanedKeywords.split(',').filter(function(word) {
        return word.trim() !== '';  // 过滤掉空字符串
      });

      // 统计词频
      var wordCount = {};
      keywordList.forEach(function(keyword) {
        wordCount[keyword] = (wordCount[keyword] || 0) + 1;
      });

      // 输出词频数据
      console.log("词频数据:", wordCount);

      // 过滤掉词频为1的词
      var filteredWordCount = Object.keys(wordCount)
              .filter(function(key) {
                return wordCount[key] > 1;  // 只保留词频大于1的词
              })
              .map(function(key) {
                return [key, wordCount[key]];  // 转换为词云需要的格式
              });

      // 输出检查
      console.log("过滤后的词云数据:", filteredWordCount);

      // 使用 wordcloud2.js 生成词云图
      WordCloud(document.getElementById('wordcloud'), {
        list: filteredWordCount,
        gridSize: 10,  // 网格大小，决定了词语间的距离
        weightFactor: 3,  // 调小权重因子
        minSize: 5,  // 最小字体大小
        maxSize: 20,  // 最大字体大小
        drawOutOfBound: false,  // 不绘制超出容器的词
        rotateRatio: 0,  // 旋转角度的比例
      });
    } else {
      console.error("WordCloud is not loaded.");
    }
  };



</script>

</body>
</html>
